
// 创建的时候我们使用ID，options来传入参数
function TransformBox(id, { row, col, url, transtion }) {
  if (!url) {
    return new Error('缺少url参数');
  }
  this.id = id || 'boxes';
  this.row = row || 4;
  this.col = col || 4;
  this.url = url;
  this.parentEl = document.getElementById(id);
  console.log(this.parentEl);
  if (id !== 'boxes') {
    this.parentEl.classList.add('boxes');
  }
  this.parentElWidth = this.parentEl.clientWidth;
  this.parentElHeight = this.parentEl.clientHeight;
  this.boxWid = this.parentElWidth / this.col;
  this.boxHei = this.parentElHeight / this.row;
  for (var i = 0; i < this.row; i++) {
    for (var j = 0; j < this.col; j++) {
      var box = document.createElement('div');
      box.classList.add('box');
      box.style.backgroundImage = `url(${this.url})`;
      console.log(`${-j * this.backgroundImageStepY}px ${-i * this.backgroundImageStepX}px`);
      box.style.backgroundSize = `${this.parentElWidth}px ${this.parentElHeight}px`;
      box.style.width = this.boxWid + 'px';
      box.style.height = this.boxHei + 'px';
      box.style.backgroundPosition = `${-j * this.boxHei}px ${-i * this.boxWid}px`;
      this.addTransition(box, transtion); // 添加动画效果
      this.parentEl.appendChild(box);
    }
  }

  // this.setBigBox();
  return this;
}

TransformBox.prototype.addTransition = function (el, transtion) {
  // console.log('rrrr', transtion);
  const transtionName = transtion || 'rotate'
  const transtionMap = {
    rotate: 'rotate',
    rotateScale: 'rotateScale'
  }
  el.classList.add(transtionMap[transtionName]);
}

TransformBox.prototype.scrollBig = function () {
  console.log('scrollBig');
  this.parentEl.classList.add('big');
  this.setBigBox();
}

TransformBox.prototype.toggleScroll = function () {
  console.log('toggleScroll');
  this.parentEl.classList.toggle("big");
  if (this.parentEl.classList.contains("big")) {
    this.setBigBox();
  } else {
    this.parentEl.style.width = this.parentElWidth + 'px';
    this.parentEl.style.height = this.parentElHeight + 'px';
  }
}

TransformBox.prototype.setBigBox = function () {
  const outContainer = document.querySelector('.big');
  outContainer.style.width = this.parentElWidth + this.boxWid - 1 + 'px';
  outContainer.style.height = this.parentElHeight + this.boxHei - 1 + 'px';
}